<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://libs.baidu.com/jquery/2.1.4/jquery.min.js"></script>

  <style>
      li{
          list-style: none;
          float: left;
          padding-left: 30px;
          font-size: 30px;
      }
    
  </style>
</head>
<body>
    	  <ul class="comment">
        	    <li>☆</li>
        	    <li>☆</li>
    	        <li>☆</li>
        	    <li>☆</li>
        	    <li>☆</li>
        	  </ul>
       

              <script>
                  $(function()
                  {
                      $("li").bind("click",function()
                      {
                         var k= $(this).index();
                         $("li").html("☆");
                         for(var i=0;i<=k;i++)
                        {
                             console.log(i)
                            $("li").eq(i).html("★")
                        }
                        })
                     
                  })
              </script>
</body>
</html>